1.1 알아두면 좋을 것

• 🔗 LINK 내용을 잘 살펴보자.

• 🔗 scss variable

1.2 이전 버전과 달라진 것

• theme를 세가지 구조로 재조직
  • format.scss: 전체적인 포맷
  • customs.scss: 커스터마이즈
  • theme-dark.scss, theme-light.scss: 테마 컬러 선택
• customs.scss 특화

1.3 The Basic of Slide Size

• 크기 컨트롤의 요소들
  1. 브라우저의 화면 배율: 125% (자신의 디폴트에 맞추자)
  2. 슬라이드 사이즈: YAML의 width: 100%, height: 100%
• width와 height를 키울수록 슬라이드의 기본 사이즈는 작아진다.
• 따라서 자신의 디폴트에 맞춰서 css의 여러 요소들을 상대 크기로 설정하자.
• 이렇게 되면 화면 배율 조정에 따라서 요소들의 크기가 함께 변한다.
• 배율을 조정한 후 글자 크기는 format.scss를 참고하자.

2.1 Slide Header

• 슬라이드 헤더는 어떻게 붙이는가?
• 좋은 애드온이 있다. 애드온에 대한 설명은 아래 참고
• reveal-header

• 커스터마이즈를 위해서는 css를 수정하면 된다.
  • 아래는 --my-brightness를 조절해 섹션 헤더의 밝기를 조절하는 코드다.

.reveal .reveal-header .sc-title p,
.reveal .reveal-header .sb-title p {
  font-size: max(10px, 1vw);
  filter: brightness(0.85);
}

• 마지막 페이지에서 헤더가 이상하게 뜨는 버그가 있다.
  • 아직 해결책을 찾지 못했다…
  • 의도는 --my-brightness를 조절해 헤더를 표시되지 않게 하는 것

3.1 CSS what, where

• scss든 css든 불러올 수 있다.
• theme에서 불러오는 것이 대체로 제대로 먹힌다.

• 현재 이 슬라이드에는 customs.scss(🔗 LINK)가 적용되어 있다.
  • .reveal .reveal-header .sc-title 설정
  • 제목에서 본문까지 거리 조절
  • 캡션 텍스트 가운데 정렬
  • 섹션 헤더 설정
  • 페이지 표시 예외 페이지 설정
  • 로고 색깔 레벨 (로고 지우는 데 필요)

3.2 CSS working?

• customs.scss에 있는 내용이 잘 작동하는가?
  • css에서 그림의 캡션이 가운데로 오도록 정렬했다.

4.1 배경색 조정하기

• theme-dark.scss를 테마에 포함한다.
• 올 블랙이 부담스러워서 조금 톤다운을 했다.

$body-bg: #303030;

4.2 Numbering section

• yml에서 설정해주면 된다.

number-sections: true

• # 제목 뒤에 {} 안에 설정하면 개별 슬라이드에서 통제 가능하다.
  • .unlisted: toc에서 뺀다.
  • .unnumbered: 번호를 뺀다.

4.3 footer 로고 크기 변경

• customs.scss에 아래와 같이 설정했다.

.reveal .slide-logo {
    height: 80px !important;
    width: 250px !important;
    max-width: unset !important;
    max-height: unset !important;
  }

4.4 단어 색깔 바꾸기

• 단어 하나의 색깔만 바꿔보자.
• 다른 형식은 바뀌지 않아야 한다.
• How does it look like in English?

4.6 종으로 긴 그림

• 마찬가지로 right, height의 적당한 조절이 필요하다.
• 그런데 로고를 어떻게 없앴나?
• 여기를 참고하라.
  • customs.css에 slide-logo 관련 추가
  • 없애고 싶은 페이지에서
  • background-color="#303030"

4.7 객체 위치 설정 1

• 텍스트는 여기 있습니다.
• 좀 더 올려붙일 수 없나요?

4.8 객체 위치 설정 2

:::{style="margin-top:-50px;"} 
 TEXT TO BE UPPLIFTED
:::

4.9 객체 위치 선정 3

• 이 예에서 볼 수 있듯이, {layout...} 내에서 css는 먹지 않는다.
• layout과 같은 수준에서 css를 먹이면 이 예시처럼 잘 먹는다.
• 각 개별 해설 부분에서 margin-x는 먹는데 다른 css는 먹지 않는다…

4.10 객체 위치 선정 4

• 객체를 올려 붙이는 또다른 방법이 있다.

:::{style="position:relative; top: -50px;"}

• css의 상대적 위치 잡기를 사용하는 것이다.
• 앞서 소개한 margin-x 방법과 비슷하지만 미묘하게 다르게 작동한다.
• 둘 다 알아두면 좋겠지만, 이 방법에는 치명적인 단점이 있다. 문서를 PDF로 익스포트했을 때 객체들이 화면에 제 위치를 벗어나게 된다.
  • margin-x를 쓰도록 하자.

4.11 TOC, Page Number, Counts

• .unlisted: TOC에 올라가지 않는다.
• .unnumbered: 번호가 매겨지는 경우 번호가 빠진다.
• visibility="uncounted": 페이지 카운트에서 제외된다.

4.12 Page Number 표기 안되게 하기

.reveal .slide-number > a[href*='end-of-document'] {
  display: none;
}

• scss에서 슬라이드 타이틀([...])을 지정해서 slide-number를 지울 수 있다.
• 위의 예는 “End of Document” 슬라이드에서 페이지 넘버 표기를 지우는 코드다.

5.1 List of The Unsolved

• footer 지우기
• TOC에서 bullet 빼기